{include file="public/header"/}
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<link rel="stylesheet" type="text/css" href="/public/static/admin/easyui/jeasyui/themes/icon.css">
<style>
	
	html,body{background-color: #fff;}
	.editPopupBox{
		width: 100%;
		height: auto;
		padding: 20px 30px;
		box-sizing: border-box;
	}
	body{background: #fff;}
	.mod-form-rows .label-wrap{font-size:12px;}
	.video-icon{width: 16px; height: 16px; background-size:16px; margin: 3px;}
	.mod-form-rows .row-item {padding-bottom: 15px;margin-bottom: 0;}/*兼容IE7 ，重写common的演示*/
	.manage-wrapper{margin:26px auto 0px auto;width:600px;}
	.manage-wrap .ui-input{width: 198px;}
	.base-form{*zoom: 1;}
	.base-form:after{content: '.';display: block;clear: both;height: 0;overflow: hidden;}
	.base-form li{float: left;width: 290px;}
	.base-form li.odd{padding-right:20px;}
	.manage-wrap textarea.ui-input{width: 588px;height: 60px;overflow:hidden;}
	#receiveFunds,#periodReceiveFunds{text-align: right;}
	#category{width: 182px}
	.contacters{margin-bottom: 10px;}
	.contacters h3{margin-bottom: 10px;font-weight: normal;}
	.mod-form-rows .pb0{padding-bottom:0;}
	.mod-form-rows .ctn-wrap{overflow: visible;}
	.ui-combo-wrap {position: static;}
	#tipsBox, #tipsBoxRe {margin-top: 20px; margin-left: 30px; width: 460px;}
	#tipsBox p, #tipsBoxRe p {line-height: 24px;}
	.mod-form-rows .label-wrap{width: 80px;margin-right: 0;}
	.textbox.combo.datebox{line-height: 16px;}
	/* .textbox{border: 0;} */
</style>
	<div id="manage-wrap" class="manage-wrap editPopupBox">
	<form id="manage-form" class="layui-form" novalidate="novalidate">
		<ul class="mod-form-rows base-form" id="base-form">
			<li class="row-item odd">
				<div class="label-wrap"><span class="red">*</span><label for="sn">客户编号</label></div>
				<div class="ctn-wrap"><input type="text" value="{$info.sn}" id="sn" class="ui-input" name="sn"></div>
			  </li>
			  
			  <li class="row-item">
				<div class="label-wrap"><span class="red">*</span><label for="prefix">客户名称</label></div>
				<div class="ctn-wrap"><input type="text" value="{$info.name}" name="name" class="ui-input" id="prefix" /></div>
			  </li>
	
			  <li class="row-item odd">
			  	<div class="label-wrap"><label for="billstype">客户类别</label></div>
			  	<div class="ctn-wrap">
			  		<!-- <span id="billstype"></span> -->
			  		<div class="layui-input-block" style="margin-left: 81px;min-height: 34px;">
			  			<select name="category_id" lay-filter="">
			  				{volist name="category" id="vo"}
			  					<option value="{$vo.id}" {if condition="$info.category_id eq $vo.id"} selected="" {/if}>{$vo.name}</option>
			  				{/volist}
			  			</select>
			  		</div>
			  	</div>
			  </li>


			  <li class="row-item odd">
			  	<div class="label-wrap"><label for="billstype">客户等级</label></div>
			  	<div class="ctn-wrap">
			  		<!-- <span id="billstype"></span> -->
			  		<div class="layui-input-block" style="margin-left: 81px;min-height: 34px;">
			  			<select name="vip_id" lay-filter="">
			  				{volist name="vip" id="vo"}
			  					<option value="{$vo.id}" {if condition="$info.vip_id eq $vo.id"} selected="" {/if}>{$vo.name}</option>
			  				{/volist}
			  			</select>
			  		</div>
			  	</div>
			  </li>

			  <li class="row-item odd">
			  	<div class="label-wrap"><span class="red">*</span><label for="end_date">余额日期</label></div>
			  	<div class="ctn-wrap">
					  <input type="date" value="{$info.end_date}" id="end_date" class="ui-input" name="end_date">
				</div>
			  </li>
			    
			  <li class="row-item ">
			  	<div class="label-wrap"><span class="red">*</span><label for="begin_recive_money">期初应收款</label></div>
			  	<div class="ctn-wrap"><input type="text" value="{$info.begin_recive_money}" name="begin_recive_money" class="ui-input" id="begin_recive_money" /></div>
			  </li>


			  <li class="row-item odd">
			  	<div class="label-wrap"><span class="red">*</span><label for="begin_before_money">期初预收款</label></div>
			  	<div class="ctn-wrap"><input type="text" value="{$info.begin_before_money}" id="begin_before_money" class="ui-input" name="begin_before_money"></div>
			  </li>
			    
			  <li class="row-item">
			  	<div class="label-wrap"><span class="red">*</span><label for="identify_number">纳税人识别号</label></div>
			  	<div class="ctn-wrap"><input type="text" value="{$info.identify_number}" name="identify_number" class="ui-input" id="identify_number" /></div>
			  </li>

			  <li class="row-item odd">
			  	<div class="label-wrap"><span class="red">*</span><label for="open_bank">开户银行</label></div>
			  	<div class="ctn-wrap"><input type="text" value="{$info.open_bank}" id="open_bank" class="ui-input" name="open_bank"></div>
			  </li>
			    
			  <li class="row-item">
			  	<div class="label-wrap"><span class="red">*</span><label for="bank_number">银行账号</label></div>
			  	<div class="ctn-wrap"><input type="text" value="{$info.bank_number}" name="bank_number" class="ui-input" id="bank_number" /></div>
			  </li>

			  <li class="row-item odd">
			  	<div class="label-wrap"><label for="billstype">销售人员</label></div>
			  	<div class="ctn-wrap">
			  		<div class="layui-input-block" style="margin-left: 81px;min-height: 34px;">
			  			<select name="staff_id" lay-filter="">
			  				{volist name="staff" id="vo"}
			  					<option value="{$vo.id}" {if condition="$info.staff_id eq $vo.id"} selected="" {/if}>{$vo.name}</option>
			  				{/volist}
			  			</select>
			  		</div>
			  	</div>
			  </li>


		</ul>
	</form>

	<div class="contacters">
		<h3 class="dn">联系方式</h3>
		<div class="grid-wrap" style="width: calc(100% - 20px);">
		  <table id="grid">
		  </table>
		  <!-- <div id="page"></div> -->
		</div>
	</div>


    <!-- 	以隐藏的方式获取联系地址的样式 ，作用是样式 -->
    <div class="lxdz" id="lxdz" style="display:none;">
		<div class="pr class"><input type="text" class="textbox address customelement"   autocomplete="off" readonly=""></div>
	</div>

	<!-- 	以隐藏的方式获取联系地址的样式 ，作用是赋值 -->
    <div class="lxaddr" id="lxdzaddr"  style="display:none;">
		<input type="text" id="lxaddr" value=""   autocomplete="off" readonly="">
	</div>
	<form id="manage-form-mark" novalidate="novalidate">
		<ul class="mod-form-rows">
			<li class="row-item pb0">
				<div class="ctn-wrap"><textarea name="mark" id="note" class="ui-input ui-input-ph" placeholder="添加备注信息">{$info.mark}</textarea></div>
			</li>
		</ul>
		<input type="hidden" name="id" value="{$info.id}">
	</form>
	
	
</div>
<script src="/public/static/admin/easyui/layui-v2.6.8/layui.js"></script>
<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>

<script>

	$(document).ready(function () {
    	$("#grid").jqGrid({
	    	//url:'/admin/staff/index.html?ajax=100',
	        datatype: "local",//数据来源，本地数据（local，json,jsonp,xml等）
	        height:'124px',//高度，表格高度。可为数值、百分比或'auto'
	        //width: Public.setGrid().w,
	        //height: Public.setGrid().h,
	        colNames: ["", "<span class='red'>*</span>联系人", "手机", "座机", "QQ/微信/Email","联系地址","首要联系人"],
	        colModel:[
	            {name:'id',index:'id', width:60, formatter: cLink}, 
	            {name:'name', width:53, editable: true,edittype: "text",editrules: { required: true }},
	            {name:'telephone',index:'name asc', width:71, editable: true},
	            {name:'phone',index:'name asc',width:71, editable: true},
	            {name: 'numbers', index: 'name asc', width:106, editable: true},
	           // {name: 'addressStr', index: 'name asc', width:123, editable: false,formatter: addressFmt},
	            // {name: 'addressStr', index: 'name asc', width:123, editable: true,edittype: "custom",classes: "ui-ellipsis",formatter: addressFmt},
	            {
					name: "address",
					label: "联系地址",
					width: 140,
					title: !0,
					//formatter: addressFmt,
					classes: "ui-ellipsis",
					editable: !0,
					edittype: "custom",
					editoptions: {
						custom_element: addressElem,
						custom_value: addressValue,
						handle: addressHandle,
						trigger: "ui-icon-ellipsis"
					}
				},
	            {name: 'username', index: 'name asc', width:61, editable: true, edittype: "select",editoptions: {
                      value: "true:是;false:否"
                  }},
                 //{name:'id',index:'id', width:60, formatter: addressaaa}, 
	       	],
	       	cellEdit:true,
	       	cellurl : '/',
	       	// cellsubmit:false,
	        rowNum:10,
	       	rowList:[10,20,30],
	        sortname: 'id',
	     	sortorder: "desc",
	     	pagerpos:"left",//分页位置
	     	
	     	pgbuttons:true,//翻页按钮
	     	pagination:false,
	     	altRows: !0,
	        gridview: !0,
	        shrinkToFit: !1,
	        cellLayout: 8,
	        autowidth: !0,
	        pager: "#page",
	        viewrecords: !0,
	        cmTemplate: {
	            sortable: !1,
	            title: !1
	        },
		    loadError: function(t, e, i) {
			    parent.Public.tips({
			        type: 1,
			        content: "操作失败了哦，请检查您的网络链接！"
			    })
			}
   		});


		var mydata = [];
		$.ajax({
			type: 'GET',
			url: "getExtInfo.html?id={$info.id}",
			async: false,
			error: function (request) {
				alert("发送请求失败！");
			},
			success: function (data) {
				console.log(data);
				mydata = data;
			}
		});

		if(mydata.length == 0){
			for (var i = 0; i < 5; i++) {
			  var obj = {id: i+1, name: "", telephone: "", phone: "", numbers: "", address: "", username: ""}
			  mydata.push(obj);
			};
		}
	    
	    for ( var i = 0; i <= mydata.length; i++){
	    	jQuery("#grid").jqGrid('addRowData', i + 1, mydata[i]);
	    }

	    $(".grid-wrap").on("click", ".ui-icon-ellipsis", function(e) {
	   		view('/admin/customer/address.html',this)
		})

		function addressElem(e, t) {
			var addr=$(".address");
			//补充.calss
			$("#lxdz").html('<div class="pr class"><input type="text" class="textbox address customelement"   autocomplete="off" readonly=""></div>');
			return $(addr);
			
		}

		function addressValue(e, t, a) {
			var ad = $("#lxaddr").val();
			$("#lxaddr").val("");//重置赋值
			return ad;
		}

		function addressHandle() {
			$(".hideFile").append($(".address").val("").unbind("focus.once"))
		}


		function cLink(cellvalue, options, rowObject){
		    return '<div class="operating"><span class="ui-icon ui-icon-plus" title="新增行" onclick="add()"></span> <span class="ui-icon ui-icon-trash" onclick="del('+rowObject.id+')">删除</span></div>';
		}

		function myelem (value, options) {
			var el = document.createElement("input");
			el.type="text";
			el.value = value;
			return el;
		}
		
		function myvalue(elem, operation, value) {
			if(operation === 'get') {
			return $(elem).val();
			} else if(operation === 'set') {
			$('input',elem).val(value);
			}
		}
		
	});

	
	function add() {
		var rows = $("#grid").jqGrid('getRowData');
		var obj = {id: rows.length+1, name: "", telephone: "", phone: "", numbers: "", address: "", username: ""}
		$("#grid").addRowData(rows.length+1, obj, "last");
		var rows = $("#grid").jqGrid('getRowData');
	}

	function del (rowId) {
		var rows = $("#grid").jqGrid('getRowData');
		if(rows.length <= 1){
			layer.msg("至少保留一行");
			return false;
		}
		$("#grid").jqGrid("delRowData",rowId);
	}
</script>

<script type="text/javascript">
    function view(url, obj) {
        
        var o = $(obj);
       
        layer.open({
            type: 2,
            area: ['600px', '90%'],
            fixed: false, //不固定
            btn: ['确定', '取消'],
            content: url,

            yes: function (index, layero) {
                var body = layer.getChildFrame('body', index);
                var province = body.find("#province option:selected").val();//省
                var city = body.find("#city option:selected").val();//市
                var county = body.find("#county option:selected").val();//区
                var address = body.find('#address').val();//详细地址
                if(province==''){
					layer.msg("请选择省");
                    return false;
                }
                if(city==''){
					layer.msg("请选择市");
                    return false;
                }
                if(county==''){
					layer.msg("请选择区");
                    return false;
                }
                if(address==''){
					layer.msg("请填写详情地址");
                    return false;
                }
                var addr =province+' '+city+' '+county+' '+address;
                $("#lxaddr").val(addr);
                
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            },
            btn2: function (index, layero) {
                //按钮【按钮二】的回调
                layer.close(index);
            }
        });
    }

</script>

{include file="public/footer"/}